<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>客户维护信息</title>
		<script src="//unpkg.com/vue/dist/vue.js"></script>
		<script src="//unpkg.com/element-ui@2.4.11/lib/index.js"></script>
		<style scoped>
			/* 在此定义当前页面css */
			@import url("//unpkg.com/element-ui@2.4.11/lib/theme-chalk/index.css");
		</style>
		
		<style type="text/css">
			/* .el-form-item label{
				margin: 30px auto;
			} */
			center{
				font-size: 30px;
			}
		</style>
	</head>
	<body>
		<div id="app">
		<br/>
			<center>客户信息维护</center>
		<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" size="mini">
		  
			<el-form-item label="客户名称" prop="name">
			<el-input v-model="ruleForm.name"></el-input>
			</el-form-item>
			
			<el-row>
          <el-col :span="8">
						<!-- 1104代表客户种类字典表 -->
						<el-form-item label="客户种类" prop="type">
							<el-select v-model="ruleForm.type" placeholder="请选择客户种类">
								<el-option label="客户" value="1105"></el-option>
								<el-option label="供应商" value="1106"></el-option>
								<el-option label="合作伙伴" value="1107"></el-option>
								<el-option label="媒体" value="1108"></el-option>
								<el-option label="其他" value="1109"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					
					<el-col :span="8">
						<!-- 1110代表客户种类字典表 -->
						<el-form-item label="客户类型" prop="sort">
							<el-select v-model="ruleForm.sort" placeholder="请选择客户类型">
								<el-option label="潜在" value="1111"></el-option>
								<el-option label="签约" value="1112"></el-option>
								<el-option label="重复购买" value="1113"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					
					<el-col :span="8">
					<!-- 1114代表客户来源字典表 -->
					<el-form-item label="客户来源" prop="source">
						<el-select v-model="ruleForm.source" placeholder="请选择客户类型">
							<el-option label="电话来访" value="1115"></el-option>
							<el-option label="客户介绍" value="1116"></el-option>
							<el-option label="独立开发" value="1117"></el-option>
							<el-option label="媒体宣传" value="1118"></el-option>
							<el-option label="促销活动" value="1119"></el-option>
							<el-option label="老客户" value="1120"></el-option>
							<el-option label="代理商" value="1121"></el-option>
							<el-option label="合作伙伴" value="1122"></el-option>
							<el-option label="公开招标" value="1123"></el-option>
							<el-option label="互联网" value="1124"></el-option>
							<el-option label="其他" value="1125"></el-option>
						</el-select>
					</el-form-item>
					</el-col>
			</el-row>
			
		  <!-- 对应客户经理：放一个带icon的文本框，
		  然后可以点击搜索框搜索到所有的客户经理信息，可选择-->
		  
			<el-form-item label="创建日期" required>
			<el-col :span="9">
				<el-form-item prop="addtime1">
				<el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.addtime" style="width: 100%;"></el-date-picker>
				</el-form-item>
			</el-col>
			<el-col class="line" :span="2">-</el-col>
			<el-col :span="9">
				<el-form-item prop="addtime2">
				<el-time-picker type="fixed-time" placeholder="选择时间" v-model="ruleForm.addtime2" style="width: 100%;"></el-time-picker>
				</el-form-item>
			</el-col>
			</el-form-item>
			
			<el-form-item label="首次签约" required>
			<el-col :span="9">
				<el-form-item prop="firstsign1">
				<el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.firstsign1" style="width: 100%;"></el-date-picker>
				</el-form-item>
			</el-col>
			<el-col class="line" :span="2">-</el-col>
			<el-col :span="9">
				<el-form-item prop="firstsign2">
				<el-time-picker type="fixed-time" placeholder="选择时间" v-model="ruleForm.firstsign2" style="width: 100%;"></el-time-picker>
				</el-form-item>
			</el-col>
			</el-form-item>
			
			<el-row>
					<el-col :span="8">
						<!-- 1126代表客户阶段字典表 -->
						<el-form-item label="客户阶段" prop="stage">
							<el-select v-model="ruleForm.stage" placeholder="请选择客户类型">
								<el-option label="售前跟踪" value="1127"></el-option>
								<el-option label="接通电话" value="1128"></el-option>
								<el-option label="实时沟通" value="1129"></el-option>
								<el-option label="警告流失" value="1130"></el-option>
								<el-option label="暂缓流失" value="1131"></el-option>
								<el-option label="已流失" value="1132"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<!-- 1133代表关系等级字典表 -->
						<el-form-item label="关系等级" prop="relation">
							<el-select v-model="ruleForm.relation" placeholder="请选择客户类型">
								<el-option label="密切" value="1134"></el-option>
								<el-option label="中等" value="1135"></el-option>
								<el-option label="一般" value="1136"></el-option>
								<el-option label="较差" value="1137"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<!-- 1138代表信用等级字典表 -->
						<el-form-item label="信用等级" prop="credit">
							<el-select v-model="ruleForm.credit" placeholder="请选择客户类型">
								<el-option label="高" value="1139"></el-option>
								<el-option label="中" value="1140"></el-option>
								<el-option label="低" value="1141"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
			</el-row> 
			
			<!-- 1142代表结账方式字典表 -->
			<el-form-item label="结账方式" prop="checkout">
				<el-select v-model="ruleForm.checkout" placeholder="请选择客户类型">
					<el-option label="现款现货" value="1143"></el-option>
					<el-option label="货到付款" value="1144"></el-option>
					<el-option label="先款后货" value="1145"></el-option>
					<el-option label="账期收款" value="1146"></el-option>
					<el-option label="月结" value="1147"></el-option>
					<el-option label="季结" value="1148"></el-option>
					<el-option label="年结" value="1149"></el-option>
				</el-select>
			</el-form-item>
		  
			<el-form-item label="备注信息" prop="remarks">
				<el-input v-model="ruleForm.remarks"></el-input>
			</el-form-item>
			
				<el-form-item>
					<el-button type="primary" @click="submitForm('ruleForm')">确认信息</el-button>
					<el-button @click="resetForm('ruleForm')">重置</el-button>
			</el-form-item>
		</el-form>
		</div>
		<script type="text/javascript">
			var Main = {
				data() {
				  return {
					ruleForm: {
					  type: '',
					  sort: '',
						addtime1: '',
						addtime2: '',
						firstsign1: '',
						firstsign2: '',
						source: '',
						stage: '',
						relation: '',
						credit: '',
						checkout: '',
						remarks: ''
					},
					rules: {
					  type: [
							{ required: true, message: '请选择客户种类', trigger: 'change' }
					  ],
					  sort: [
							{ required: true, message: '请选择客户类型', trigger: 'change' }
					  ],
						addtime1: [
							{ type: 'date', required: true, message: '请选择日期', trigger: 'change' }
						],
						addtime2: [
							{ type: 'date', required: true, message: '请选择时间', trigger: 'change' }
						],
						firstsign1: [
							{ type: 'date', required: true, message: '请选择日期', trigger: 'change' }
						],
						firstsign2: [
							{ type: 'date', required: true, message: '请选择时间', trigger: 'change' }
						],
						source: [
							{ required: true, message: '请选择客户来源', trigger: 'change' }
						],
						stage: [
							{ required: true, message: '请选择客户阶段', trigger: 'change' }
						],
						relation: [
							{ required: true, message: '请选择关系等级', trigger: 'change' }
						],
						credit: [
							{ required: true, message: '请选择信用等级', trigger: 'change' }
						],
						checkout: [
							{ required: true, message: '请选择结账方式', trigger: 'change' }
						]
					}
				  };
				},
				methods: {
				  submitForm(formName) {
					this.$refs[formName].validate((valid) => {
					  if (valid) {
						alert('submit!');
					  } else {
						console.log('error submit!!');
						return false;
					  }
					});
				  },
				  resetForm(formName) {
					this.$refs[formName].resetFields();
				  }
				}
			  }
			var Ctor = Vue.extend(Main)
			new Ctor().$mount('#app')
			
		</script> 
		
		</body>
</html>